<template>
  <div class="home">
    <h1>热销爆款</h1>
    <button v-for="(item, index) in title" :key="index" @click="togle(index)">
      {{ item }}
    </button>
    <div>
      <div
        v-for="item in arr"
        :key="item.id"
        class="goods"
        @click="add(item.id)"
      >
        <img :src="item.img" />
        <div>{{ item.name }}</div>
        <span>{{ item.price | money() }}</span>
      </div>
    </div>

    <div class="goods_car">
      <div><input type="checkbox" :checked="all_is" @click="all_check()">全选<button @click="reserve()">反选</button><span>商品</span></div>
      <div v-for="item in car_list" :key="item.id">
        <input type="checkbox" @click="check(item)" :checked="item.is" /><img :src="item.img" />
        <span>{{ item.name }}</span>
        <span>{{ item.price | money() }}</span>
        <button @click="jian(item.id, '-')">-</button>{{ item.num
        }}<button @click="jian(item.id, '+')">+</button>
        <button @click="del(item.id)">删除</button>
      </div>
    </div>
    总价：{{ total }}元
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: ["空调", "电视", "洗衣机"],
      all_is:false,
      title_index: 0,
      arr: [],
      car_list: [],
      data: [
        {
          pid: 0,
          id: 1,
          name: "小米空调",
          img: "https://img.alicdn.com/imgextra/i2/2208583361067/O1CN01L1Trxh1JkjfCRZKJH_!!2208583361067-0-alimamacc.jpg",
          price: 599,
          num: 1,
          is: false,
        },
        {
          pid: 0,
          id: 2,
          name: "格力空调",
          img: "https://img.alicdn.com/imgextra/i2/2208583361067/O1CN01L1Trxh1JkjfCRZKJH_!!2208583361067-0-alimamacc.jpg",
          price: 99,
          num: 1,
          is: false,
        },
        {
          pid: 0,
          id: 3,
          name: "美的空调",
          img: "https://img.alicdn.com/imgextra/i2/2208583361067/O1CN01L1Trxh1JkjfCRZKJH_!!2208583361067-0-alimamacc.jpg",
          price: 299,
          num: 1,
          is: false,
        },
        {
          pid: 0,
          id: 4,
          name: "华为空调",
          img: "https://img.alicdn.com/imgextra/i2/2208583361067/O1CN01L1Trxh1JkjfCRZKJH_!!2208583361067-0-alimamacc.jpg",
          price: 899,
          num: 1,
          is: false,
        },
        {
          pid: 1,
          id: 5,
          name: "小米电视",
          img: "http://img.alicdn.com/img/i2/2916250011/O1CN013q2Qw01Bx5ORrldj9_!!4611686018427384219-0-saturn_solar.jpg",
          price: 599,
          num: 1,
          is: false,
        },
        {
          pid: 1,
          id: 6,
          name: "格力电视",
          img: "http://img.alicdn.com/img/i2/2916250011/O1CN013q2Qw01Bx5ORrldj9_!!4611686018427384219-0-saturn_solar.jpg",
          price: 99,
          num: 1,
          is: false,
        },
        {
          pid: 1,
          id: 7,
          name: "美的电视",
          img: "http://img.alicdn.com/img/i2/2916250011/O1CN013q2Qw01Bx5ORrldj9_!!4611686018427384219-0-saturn_solar.jpg",
          price: 299,
          num: 1,
          is: false,
        },
        {
          pid: 1,
          id: 8,
          name: "华为电视",
          img: "http://img.alicdn.com/img/i2/2916250011/O1CN013q2Qw01Bx5ORrldj9_!!4611686018427384219-0-saturn_solar.jpg",
          price: 899,
          num: 1,
          is: false,
        },
        {
          pid: 2,
          id: 9,
          name: "小米洗衣机",
          img: "http://img.alicdn.com/img/i3/44096902/O1CN01QJ0Nl120rAickydZz_!!4611686018427387270-2-saturn_solar.png",
          price: 599,
          num: 1,
          is: false,
        },
        {
          pid: 2,
          id: 10,
          name: "格力洗衣机",
          img: "http://img.alicdn.com/img/i3/44096902/O1CN01QJ0Nl120rAickydZz_!!4611686018427387270-2-saturn_solar.png",
          price: 99,
          num: 1,
          is: false,
        },
        {
          pid: 2,
          id: 11,
          name: "美的洗衣机",
          img: "http://img.alicdn.com/img/i3/44096902/O1CN01QJ0Nl120rAickydZz_!!4611686018427387270-2-saturn_solar.png",
          price: 299,
          num: 1,
          is: false,
        },
        {
          pid: 2,
          id: 12,
          name: "华为洗衣机",
          img: "http://img.alicdn.com/img/i3/44096902/O1CN01QJ0Nl120rAickydZz_!!4611686018427387270-2-saturn_solar.png",
          price: 899,
          num: 1,
          is: false,
        },
      ],
    };
  },
  mounted() {
    this.arr = this.data.filter((item) => item.pid == this.title_index);
  },
  methods: {
    togle(i) {
      this.title_index = i;
      this.arr = this.data.filter((item) => item.pid == this.title_index);
    },
    add(id) {
      this.data.forEach((item) => {
        if (item.id == id) {
          if (this.car_list.findIndex((item2) => item2.id == id) == -1)
            this.car_list.push({
              pid: item.pid,
              id: item.id,
              name: item.name,
              img: item.img,
              price: item.price,
              num: item.num,
              is: item.false,
            });
        }
      });
      // console.log(this.car_list.findIndex(item=>item.id==id));
      if (this.car_list.findIndex((item) => item.id == id) == -1)
        this.car_list.push({});
    },
    del(id) {
      var index = this.car_list.findIndex((item) => item.id == id);
      this.car_list.splice(index, 1);
    },
    jian(id, jia) {
      this.car_list.forEach((item) => {
        if (item.id == id) {
          if (jia == "-" && item.num > 1) {
            item.num--;
          } else if (jia == "+") {
            item.num++;
          }
        }
      });
    },
    all_check(){
      this.all_is=!this.all_is
      this.car_list.forEach(item=>{
        item.is=this.all_is
      })
    },
    check(item){
      item.is=!item.is
      this.all_is=this.car_list.every(item=>item.is==true)
    },
    reserve(){
      this.car_list.forEach(item=>{
        item.is=!item.is
         this.all_is=this.car_list.every(item=>item.is==true)
      })
    }
  },
  filters: {
    money(a) {
      return "￥" + a;
    },
  },
  computed:{
    total(){
      var rel = 0
      this.car_list.forEach(item=>{
        if(item.is){
          rel+=(item.price*item.num)
        }
      })
      return rel
    }
  }
};
</script>
<style lang='less' scoped>
.goods {
  width: 200px;
  height: 400px;
  padding: 5px;
  display: inline-block;
  margin: 20px;
  img {
    width: 190px;
    height: 200px;
  }
  span {
    color: red;
  }
}
.goods_car {
  img {
    width: 100px;
    height: 100px;
  }
}
</style>
